<template>
	<view class="storeInfo">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" :circular="circular" indicator-active-color="#fff">
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<!-- <image :src="item.imageUrl"></image> -->
				<image :src="item.imageUrl"></image>
			</swiper-item>
		</swiper>
		<view class="info" v-if="storeInfo">
			<view class="count">
				<text class="price">￥{{storeInfo.price*vipLevelCount}}</text>
				<text class="uncountPrice">原价：{{storeInfo.price}}</text>
				<!-- <text class="price" v-if="productId==18 && degree==1">￥{{135*vipLevelCount}}</text>
				<text class="price" v-if="productId==18 && degree==2">￥{{120*vipLevelCount}}</text>
				<text class="price" v-if="productId==18 && degree==3">￥{{105*vipLevelCount}}</text>
				<text class="price" v-if="productId!=18">￥{{storeInfo.price*vipLevelCount}}</text>

				<text class="uncountPrice" v-if="productId==18 && degree==1">原价：135</text>
				<text class="uncountPrice" v-if="productId==18 && degree==2">原价：120</text>
				<text class="uncountPrice" v-if="productId==18 && degree==3">原价：105</text>
				<text class="uncountPrice" v-if="productId!=18">原价：{{storeInfo.price}}</text> -->
			</view>
			<view class="title">
				{{storeInfo.productName}}
			</view>
			<text class="subTitle">{{storeInfo.title}}</text>
		</view>
		<view class="skill">
			<view class="type">
				<uni-icons type="info" size="20"></uni-icons>
				<text>专业技能</text>
			</view>
			<view class="type">
				<uni-icons type="info" size="20"></uni-icons>
				<text>完整体系</text>
			</view>
			<view class="type">
				<uni-icons type="info" size="20"></uni-icons>
				<text>优质服务</text>
			</view>
			<view class="type">
				<uni-icons type="info" size="20"></uni-icons>
				<text>售后保障</text>
			</view>

		</view>
		<view class="serviceList">
			<view class="title">
				<text>服务详情</text>
				<image src="@/static/common/权益说明标记@3x.png" mode="widthFix"></image>
			</view>


			<rich-text :nodes="htmlContent"></rich-text>

		</view>
		<view class="orderBox">
			<view class="order" @click="commitbtn">
				立即预约
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		appInfo
	} from '@/config/config.js'
	import {
		nextTick
	} from "vue";
	const {
		proxy
	} = getCurrentInstance()
	// banner图设置参数
	const indicatorDots = ref(true)
	const circular = ref(true)
	const autoplay = ref(true)
	const interval = ref(1500)
	const duration = ref(500)
	const storeInfo = ref(null)
	const bannerList = ref(null)
	const productId = ref(null)
	const degree = ref(null)
	const count = ref(null)
	let vipLevel = ref(0)
	let vipLevelCount = ref(1)
	const htmlContent = ref()
	const commitbtn = () => {
		proxy.sjuNav.navigateTo('/my/sureOrder?id=' + productId.value + '&count=' + vipLevelCount.value + '&degree=' +
			degree.value)
	}

	const getStoreInfo = () => {
		proxy.sjuRequest.request("/api/weChatMall/product/queryProduct/" + productId.value, 'post', "", "", true).then(
			res => {
				// console.log(res)
				storeInfo.value = res.data.product
				htmlContent.value = res.data.productDes.content
				// console.log(htmlContent.value)
			})
		//获取轮播图
		proxy.sjuRequest.request("/api/weChatMall/product/queryWheelPlantPic/" + productId.value, 'post').then(res => {
			if (res.code == '200') {
				bannerList.value = res.data
			}


		}).catch(err => {})

		proxy.sjuRequest.request("/api/weixin/queryMember/" + proxy.sjuLogin.getValue("miaoMaGJOpenid") + '/' + appInfo
			.appId, 'post').then(
			res => {
				if (res.data) {
					console.log(res)
					let level = res.data.memberLevel
					console.log(res)
					if (level == 'jp') {
						vipLevel.value = 1
						vipLevelCount.value = 0.8
					} else if (level == 'jz') {
						vipLevel.value = 2
						vipLevelCount.value = 0.8
					} 
				}

			})


	}

	// onMounted(() => {
	// 	nextTick(() => {
	// 		getStoreInfo()
	// 	})

	// })
	onLoad((options) => { //获取路由参数
		console.log(options.id)
		productId.value = options.id
		degree.value = options.degree
		count.value = options.count
		getStoreInfo()
	})
	// onShow((options) => {
	// 	getStoreInfo()

	// })
</script>

<style lang="scss">
	.swiper {
		$swiper-width: 100%;
		$swiper-height: 550rpx;
		width: $swiper-width;
		height: $swiper-height;

		swiper-item {
			width: $swiper-width;
			height: $swiper-height;

			image {
				width: $swiper-width;
				height: $swiper-height;
			}
		}
	}

	.storeInfo {
		width: 100%;
		height: auto;
		padding-bottom: 100px;

		.info {
			display: flex;
			flex-direction: column;
			padding: 20rpx;
			box-sizing: border-box;

			.title {
				font-size: 28rpx;
				color: #161616;
				font-weight: bold;
				line-height: 2.5;
			}

			.subTitle {
				font-size: 25rpx;
				// color: #8D8D8D;
				// overflow: hidden;
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
				// -webkit-line-clamp: 1;
			}

			.count {
				color: #D43635;
				font-size: 32rpx;

				.uncountPrice {
					color: #8D8D8D;
					font-size: 22rpx;
					text-decoration: line-through;
					margin-left: 10rpx;
				}
			}
		}

		.skill {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background: #F3F3F6;
			color: #67B731;

			.type {
				display: flex;
				flex-direction: row;
				color: #686565;
				font-size: 24rpx;
				align-items: center;
			}
		}

		.serviceList {
			padding: 0 30rpx;
			box-sizing: border-box;

			.title {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;

				image {
					width: 70rpx
				}

				text {
					color: #1F1F1F;
					font-size: 30rpx;
					font-weight: bold;
					line-height: 1.8;
				}
			}

			.serviceRange {
				width: 100%;
				height: auto;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				background: rgba(172, 172, 172, 0.2);

				.type {
					display: flex;
					flex-direction: row;
					font-size: 24rpx;
					color: #686565;
					line-height: 1.8;

					.name {
						font-size: 24rpx;
						color: #ACACAC;
						width: 20%;
					}
				}
			}

		}

		.orderBox {
			width: 100%;
			height: 100px;
			background: #fff;
			position: fixed;
			left: 0;
			bottom: 0
		}

		.order {
			width: 90%;
			height: 50px;
			line-height: 50px;
			font-size: 32rpx;
			text-align: center;
			font-weight: bold;
			color: #fff;
			background: #3A8AFB;
			border-radius: 30px;
			margin-left: 5%;
			margin-top: 20px;

		}

		pre {
			span {
				white-space: normal;
			}

		}

		h3 {
			line-height: 2
		}
	}
</style>